<template>
  <div>
    <div class="udlite-container partners">
      <van-cell-group>
        <van-tabs v-model="active">
          <van-tab title="用户名登录">
            <van-field
              v-model="username"
              label="用户名"
              placeholder="请输入用户名"
            ></van-field>
          </van-tab>
          <van-tab title="手机号登录">
            <van-field
              v-model="phone"
              label="手机号"
              placeholder="请输入手机号"
            ></van-field>
          </van-tab>
          <van-tab title="邮箱登录">
            <van-field
              v-model="email"
              label="邮箱"
              placeholder="请输入邮箱"
            ></van-field>
          </van-tab>
        </van-tabs>

        <van-field
          type="password"
          v-model="password"
          label="密码"
          placeholder="请输入密码"
        ></van-field>

        <!-- 图片标签 -->
        <van-cell-group>
          <img :src="src" @click="changecode" style="width: 300px" />
        </van-cell-group>

        <!-- 图片验证码 -->
        <van-field
          v-model="img_code"
          label="验证码"
          placeholder="请输入验证码"
        ></van-field>

        <!-- 滑块验证码 -->
        <van-cell-group>
          <drag-verify
            :width="width"
            :height="height"
            :text="text"
            ref="Verify"
          >
          </drag-verify>
        </van-cell-group>

        <van-button type="primary" @click="user_login">登录</van-button>
        <van-button color="blue" url="http://localhost:8000/dd_url">钉钉</van-button>
        
      </van-cell-group>
    </div>
    <projectfooter />
  </div>
</template>

<script>
import projectfooter from "../header_folder/projectfooter.vue";
import dragVerify from "vue-drag-verify";
export default {
  components: { projectfooter, dragVerify },
  data() {
    return {
      active: 0,
      username: "",
      phone: "",
      email: "",
      password: "",

      width: 320,
      height: 42,
      text: "请拖动滑块",

      img_code: "",
      src: "http://127.0.0.1:8000/myimg/",
    };
  },
  methods: {
    user_login() {
      this.axios
        .post("http://127.0.0.1:8000/login/", {
          username: this.username,
          phone: this.phone,
          email: this.email,
          password: this.password,
          img_code: this.img_code,
          active: this.active,
        })
        .then((resp) => {
          if (resp.data.code == 200) {
            if (this.$refs.Verify.isPassing == true) {
              console.log(resp);
              this.$toast(resp.data.msg);
              localStorage.setItem("token", resp.data.token);
              localStorage.setItem("uid", resp.data.uid);
              localStorage.setItem("u_name", resp.data.u_name);
              this.$router.push("/myindex");
            } else {
              this.$toast(this.text);
            }
          } else {
            this.$toast(resp.data.msg);
          }
          if (resp.data.code == 404) {
            alert(resp.data.msg);
            this.$router.push("/myregister");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    changecode: function () {
      var num = Math.ceil(Math.random() * 10);
      this.src = this.src + "?num=" + num;
    },
  },
  created() {},
};
</script>

<style>
img {
  /* 鼠标变为点击状态（变成手） */
  cursor: pointer;
}
</style>